<template>
  <div id="index">
    <!-- 头部 -->
    <div id="u130" class="ax_default">
      <img id="u130_img" class="img" src="../../../assets/boardImg/u130.svg" />
      <div id="u130_text" class="text">
        <p>
          <span>标注运营看板</span>
        </p>
      </div>
    </div>
    <div
      id="u131"
      class="ax_default"
      data-left="21"
      data-top="10"
      data-width="179"
      data-height="33"
    >
      <div id="u132" class="ax_default _形状4">
        <img
          id="u132_img"
          class="img"
          src="../../../assets/boardImg/u132.svg"
        />
        <div
          id="u132_text"
          class="text"
          style="display: none; visibility: hidden"
        >
          <p></p>
        </div>
      </div>
      <div id="u133" class="ax_default _形状4">
        <img id="u133_img" class="img" src="../../../assets/boardImg/u28.svg" />
        <div
          id="u133_text"
          class="text"
          style="display: none; visibility: hidden"
        >
          <p></p>
        </div>
      </div>
    </div>
    <!-- 时间 -->
    <div id="u150" class="ax_default" data-label="时间">
      <span>{{ nowDate }}</span>
    </div>
    <!-- 返回首页 -->
    <div id="u151" class="ax_default" style="cursor: pointer">
      <div id="u151_text" class="text">
        <span
          style="
            font-family: 'Arial Normal', 'Arial', sans-serif;
            font-weight: 400;
          "
          >&nbsp;</span
        >
        <span
          style="
            font-family: 'Font Awesome 5 Pro Solid',
              'Font Awesome 5 Pro Regular', 'Font Awesome 5 Pro', sans-serif;
            font-weight: 900;
          "
          ></span
        >
        <span @click="handleHome">返回首页</span>
      </div>
    </div>
    <!-- 主要部分 -->
    <div class="flex-box">
      <div class="item" style="width: 30%">
        <div class="flex-top"></div>
        <div class="flex-bottom"></div>
      </div>
      <div class="item">
        <div class="flex-top"></div>
        <div class="flex-bottom"></div>
      </div>
      <div class="item" style="width: 30%">
        <div class="flex-top"></div>
        <div class="flex-bottom"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nowDate: "" // 当前日期
    };
  },
  components: {},
  mounted() {
    this.currentTime();
  },
  methods: {
    // 返回首页
    handleHome() {
      // this.$router.go(-1);//返回上一页
      this.$router.push({ name: "indexpage" });
    },
    // 当前时间
    currentTime() {
      setInterval(this.formatDate, 500);
    },
    formatDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      ];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.nowDate = `${year}/${month}/${day} 上午 ${hour}:${minute}:${second} ${weekArr[week]}`;
    }
  },
  // 销毁定时器
  beforeDestroy() {
    if (this.formatDate) {
      clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
    }
  }
};
</script>

<style lang="scss" scoped>
#index {
  color: #d3d6dd;
  // background-color: #000000;
  width: 100%;
  height: 100vh;
  margin: 0px;
  background-color: rgba(6, 18, 56, 1);
  background-image: none;
  position: relative;
  left: 0px;
  width: 1900px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.ax_default {
  font-family: "微软雅黑", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  letter-spacing: normal;
  color: #666666;
  vertical-align: none;
  text-align: center;
  line-height: normal;
  text-transform: none;
}
#u130 {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1900px;
  height: 78px;
  display: flex;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 28px;
  color: #ffffff;
}
#u130_img {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  height: 78px;
}

#u130 .text {
  position: absolute;
  align-self: center;
  padding: 3px 0px 0px 0px;
  box-sizing: border-box;
  width: 100%;
}
#u131 {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 0px;
  height: 0px;
}
#u132 {
  border-width: 0px;
  position: absolute;
  left: 60px;
  top: 11px;
  width: 140px;
  height: 30px;
  display: flex;
}
#u132_img {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 140px;
  height: 30px;
}
#u132 .text {
  position: absolute;
  align-self: center;
  padding: 3px 0px 0px 0px;
  box-sizing: border-box;
  width: 100%;
}
#u133 {
  border-width: 0px;
  position: absolute;
  left: 21px;
  top: 10px;
  width: 30px;
  height: 33px;
  display: flex;
}
._形状4 {
  color: #333333;
}
#u133_img {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 30px;
  height: 33px;
}
#u150 {
  border-width: 0px;
  position: absolute;
  left: 1550px;
  top: 18px;
  width: 288px;
  height: 24px;
  display: flex;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #ffffff;
  font-size: 18px;
  text-align: left;
}
#u151 {
  border-width: 0px;
  position: absolute;
  left: 15px;
  top: 53px;
  width: 103px;
  height: 35px;
  display: flex;
  color: #ffffff;
  background-color: rgba(102, 122, 170, 1);
  border-radius: 3px;
}
#u151 .text {
  position: absolute;
  align-self: center;
  padding: 3px 0px 0px 0px;
  box-sizing: border-box;
  width: 100%;
}
.flex-box {
  height: 86%;
  width: 97%;
  // background-color: #fff;
  border-width: 0px;
  position: absolute;
  left: 20px;
  right: 20px;
  top: 120px;
  // width: 1900px;
  display: flex;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 28px;
}
.item:nth-child(2) {
  flex: 1;
}
.flex-top {
  height: 58%;
  margin: 0 10px 20px 0;
  // border:1px solid rgba(102, 122, 170, 1);
  background-color: rgba(102, 122, 170, 1);
}
.flex-bottom {
  height: 40%;
  margin: 0 10px 10px 0;
  background-color: rgb(153, 163, 185);
  // border:1px solid rgba(102, 122, 170, 1);
}
</style>
